<template>
  <div class="app-container">
    <ECard rightTitle="代码" :ilabel="ilabel" leftTitle="代码类型">
      <template #left>
        <el-button type="primary" @click="leftModify('add')" size="medium"
          >新增类型</el-button
        >
        <div class="title">代码菜单</div>
        <div class="caidan">
          <div>
            <el-tree
              class="leftTree"
              :data="data"
              node-key="id"
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.id }} - {{ node.label }}</span>
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link"> ... </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="leftModify(data)"
                      >修改</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="leftDelete(node, data)"
                      >删除</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </el-tree>
          </div>
        </div>
      </template>
      <template #right>
        <div>
          <el-button
            type="primary"
            @click="newCode()"
            size="medium"
            :disabled="rowID == ''"
            >新增代码</el-button
          >
          <el-button
            size="medium"
            @click="batchDelete"
            :disabled="multi.length == 0"
            >批量删除</el-button
          >
          <ETable
            ref="ETable"
            style="margin-top: 20px"
            checked
            :showIndex="false"
            :height="320"
            :titleObj="titleObj"
            @sortFun="sortFun"
            operateWidth="110"
            :reqObj="setOf"
            :reqFn="getSysCode"
            @batch="batch"
          >
            <template v-slot="{ scope }">
              <el-button @click="newCode(scope)" type="text" size="small"
                >修改</el-button
              >
              <el-divider direction="vertical"></el-divider>
              <el-button @click="rightDelete(scope)" type="text" size="small"
                >删除</el-button
              >
            </template>
          </ETable>
        </div>
      </template>
    </ECard>
    <codeTypeEdit ref="codeTypeEdit"></codeTypeEdit>
    <codeEdit ref="codeEdit"></codeEdit>
  </div>
</template>

<script>
let id = 1000;
import ECard from "@/components/ECard";
import ETable from "@/components/ETable";
import codeTypeEdit from "./codeTypeEdit.vue";
import codeEdit from "./codeEdit.vue";
import {
  getSysCodeTypeTree,
  deleteSysCodeType,
  getSysCode,
  deleteSysCode,
} from "@/api/management/code";
export default {
  name: "Code",
  components: {
    ECard,
    ETable,
    codeTypeEdit,
    codeEdit,
  },
  data() {
    return {
      setOf: {
        codeTypeCode: "",
        sortStr: "",
      },
      data: [],
      defaultProps: {
        children: "ab",
        label: "name",
      },
      titleObj: [
        {
          prop: "CODE_VALUE",
          label: "代码值",
          sortable: "custom",
          width: "120",
        },
        { prop: "CODE_NAME", label: "代码名称", sortable: "custom" },
        {
          prop: "CODE_ORDER",
          label: "排序号",
          width: "120",
          sortable: "custom",
        },
      ],
      rowID: "",
      rowName: "",
      oldId: "",
      multi: [],
      ilabel: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getSysCode,
    async getData() {
      const res = await getSysCodeTypeTree();
      this.data = res.data.bdata;
    },
    leftModify(row) {
      this.$refs.codeTypeEdit.open(row);
    },
    async leftDelete(node, row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysCodeType(row.id);
        if (res.data.bcode == 0) {
          this.$message({
            type: "success",
            message: `${res.data.bmsg}`,
          });
        }
        this.getData();
      }
    },
    rightModify(row) {
      console.log("rightModify", row);
    },
    async handleNodeClick(row) {
      console.log("行点击", row);
      this.ilabel = row.name;
      this.rowID = row.id;
      this.rowName = row.name;
      this.setOf.codeTypeCode = row.id;
      this.pageFun();
    },
    // 表格点击删除
    async rightDelete(row) {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let res = await deleteSysCode(row.ID);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(res.data.bmsg);
          // 页数大于一页并且当前页只有一条数据，删除后页数-1
          if (
            this.$refs.ETable.pageInfo.total %
              this.$refs.ETable.pageInfo.size ===
              1 &&
            this.$refs.ETable.pageInfo.page > 1
          ) {
            this.$refs.ETable.pageInfo.page -= 1;
          }
          this.$refs.ETable.getData();
        }
      }
    },
    // 获取表格第一页数据
    async pageFun() {
      this.$refs.ETable.pageInfo.page = 1;
      this.$refs.ETable.getData();
    },
    sortFun(str) {
      this.setOf.sortStr = str;
      this.$refs.ETable.getData();
    },
    newCode(val) {
      if (!val) {
        this.$refs.codeEdit.open({
          rowName: this.rowName,
          rowID: this.rowID,
        });
      } else {
        this.$refs.codeEdit.open({
          ...val,
          rowName: this.rowName,
          rowID: this.rowID,
        });
      }
    },
    // 表格传出来的多选事件
    batch(val) {
      let arr = val.map((item) => item.ID);
      this.multi = arr;
    },
    // 批量删除
    async batchDelete() {
      let t = await this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      if (t) {
        let str = this.multi.join();
        let res = await deleteSysCode(str);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success(res.data.bmsg);
          this.pageFun();
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-card__body {
    position: relative !important;
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
